<template>
	<view class="container">
		<view class="header">
			<!-- 搜索 -->
			<view class="search flex align-center margin-lr-sm round">
				<view class="icon text-df text-bold text-gray">
					<text class="wlIcon-sousuo1"></text>
				</view>
				<input class="uni-input" focus placeholder="请输入" v-model="search" />
				<text class="search_button" @tap="searchInput()">搜索</text>

				<!-- <view class="uni-form-item uni-column">
					<view class="title">可自动聚焦的input</view>
					<input class="uni-input" focus placeholder="自动获得焦点" />
				</view> -->
			</view>

			<!-- 功能: 城市 排序 筛选 -->
			<view class="control padding-lg">


				<view class="display: flex; justify-between; w100P">
					<view class="ctrl_item select_sort" :class="(pop_show && pop_type == 'sort') ? 'active' : ''"
						@tap="open_pop('sort')">
						<text>{{sort.name || '默认排序'}}</text>
					</view>

					<view class="ctrl_item select_city">
						<text @tap="open_City()">{{city}}</text>
					</view>

					<view class="ctrl_item filtration" :class="(pop_show && pop_type == 'filtration') ? 'active':''">
						<text>门店筛选</text>
					</view>
				</view>

			</view>
		</view>

		<!-- 空数据 -->
		<scroll-view scroll-y="true" class="main">
			<view class="shop_list">
				<wanl-empty text="没有找到任何门店" v-if="shop_list.length === 0" />
				<radio-group @change="radio_change" style="width: 100%;">

					<view class="shop_item" v-for="(item,index) in shop_list" :key="item.id">

						<view class="select_shop" v-if="!showSwitch">
							<label class="radio">
								<radio :value="String(item.id)" activeBackgroundColor="#fd8c00" />
							</label>
						</view>

						<view class="image"
							@tap="$wanlshop.to(`/pages/service/select_shop_details?id=${item.id}&showSwitch=${ this.showSwitch }`)"
							:style="{background: `url(${$wanlshop.oss(item.store_avatar)})`}"></view>

						<view class="right"
							@tap="$wanlshop.to(`/pages/service/select_shop_details?id=${item.id}&showSwitch=${ this.showSwitch }`)">
							<view style="display:flex;align-items:center;">
								<uni-icons type="shop-filled" size="30"></uni-icons>
								<text class="title" style="font-weight:bold;margin-left:12rpx;">
									{{item.store_name}}
								</text>
							</view>

							<view class="score_sales">
								<view class="score">
									<wanl-rate :size="13" :current="1" :quantity="1" :disabled="true"></wanl-rate><span
										style="color: #fd8c00;">{{item.grade}}</span>
								</view>
							</view>

							<view class="addr">
								<view class="address">
									{{item.address}}
								</view>
								<view class="distance">
									{{(item.distance/1000).toFixed(2)}}km
								</view>
							</view>

							<view class="tag_distance">
								<scroll-view scroll-x="true" class="tag_scroll">
									<view class="tag_list">
										<view class="tag" :class="tagInd == 0 ? 'active' : ''"
											v-for="(tags,tagInd) in (item.tag.split(','))" :key="tagInd">
											{{tags}}
										</view>
									</view>
								</scroll-view>
							</view>
						</view>


					</view>
				</radio-group>
			</view>
		</scroll-view>

		<view id="popup" :class="pop_show ? 'active':''">
			<view class="popup-content">

				<!-- 排序 -->
				<block v-if="pop_type == 'sort'">
					<view class="sort_list">
						<view class="sort_item" :class="sort.value == item.value ? 'active': ''"
							v-for="(item, index) in sort_list" :key="index" @tap="select_sort(item)">
							<text>{{item.name}}</text>
							<view class="icon text-df" v-if="sort.value == item.value">
								<!-- <text class="wlIcon-fanhui2"></text> -->
								<image style="width: 30rpx; height: 20rpx;"
									src="../../static/images/default/check-active.png"></image>
							</view>
						</view>
					</view>
				</block>

				<!-- 筛选 -->
				<block v-if="pop_type == 'filtration'">
					<view class="filtration_list">
						<view class="filtration_item" v-for="(item,index) in filtration_list" :key="item.id">
							<view class="title">
								{{item.title}}
							</view>

							<view class="filtration_son">
								<view class="filtration_son_item"
									:class="filtration[item.title] == son.id ? 'active':''"
									v-for="(son,sonInd) in item.data" :key="son.id"
									@tap="select_filtration(item.title,son.id)">
									{{son.name}}
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="mask" @tap="pop_show = !pop_show"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {

		},
		computed: {
			...mapState(['common', 'user', 'update'])
		},
		data() {
			return {
				location: "",
				city: '距离优先',
				// 排序列表
				sort_list: [{
						name: '综合排序',
						value: 'default',
						key: '1'
					},
					{
						name: '评分最高',
						value: 'score',
						key: '2'
					},
					{
						name: '销量最高',
						value: 'sales',
						key: '3'
					}
				],
				sort: {}, // 已选中的排序
				// 筛选列表
				filtration_list: [{
						id: 1,
						title: '品牌',
						data: [{
								id: 1,
								name: '123',
							},
							{
								id: 2,
								name: '123',
							},
							{
								id: 3,
								name: '123',
							}
						]
					},
					{
						id: 2,
						title: '类型',
						data: [{
								id: 1,
								name: '465',
							},
							{
								id: 2,
								name: '465',
							},
							{
								id: 3,
								name: '465',
							}
						]
					}
				],

				filtration: {}, // 已选中的筛选
				pop_show: false, // 顶部弹出框开关
				pop_type: 'sort', // 弹出框内容类型
				// 店铺列表
				shop_list: [{
					id: 0,
					store_avatar: '', // 门店图
					store_name: '', // 店名
					address: '', // 地址
					grade: '', // 评分
					business_hours: '', // 营业时间
					distance: 0, // 距离
					tag: '', // 标签
				}],
				select_shop: '', // 选中的店铺
				showSwitch: false,
				search: ''
			};
		},
		onLoad(options) {
			console.log('loadList', options)
			if (options.header) {
				this.showSwitch = true
			}
			this.loadData()
		},
		onShow() {
			// 接收来自 选择城市 的数据
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1]; //当前页面

			// #ifdef MP-WEIXIN
			console.log('currPage', currPage.data)
			let json = currPage.data.city;
			// #endif

			// #ifndef MP-WEIXIN
			console.log('currPage', currPage._data)
			let json = currPage._data.city;
			// #endif

			console.log('city', json)
			this.city = json;
			this.loadData()
		},
		methods: {
			searchInput() {
				// console.log('searchInput', this.searchName)
				this.loadData({
					search: this.search,
					sort: this.sort
				})
			},
			// 加载门店列表
			async loadData(data) {
				const res = await this.$wanlshop.location();
				if (res.code == 1) {
					let loc = res.data.address.streetNumber.location.split(',');
					console.log('loaction', loc)

					this.$api.get({
						url: '/wanlshop/store/list',
						loadingTip: '加载中',
						data: {
							...data,
							longitude: loc[0],
							latitude: loc[1]
						},
						success: res => {
							console.log("加载门店列表", res)
							this.shop_list = res.data;
						}
					});
				}
			},
			// 搜索
			handleSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			},
			// 单选框 选择店铺
			radio_change(e) {
				console.log('radio', e.detail.value)
				const select_shop = e.detail.value;

				let obj = {};
				// obj.city = this.city;
				for (let item of this.shop_list) {
					if (item.id == select_shop) obj = item;
				}

				console.log('obj', obj)

				// 将选中的门店返回给上一页
				uni.setStorageSync('store_details', obj)
				uni.navigateBack({ //返回
					delta: 1
				})
			},
			open_City() {
				this.sort = '';
				this.pop_show = false;
				this.loadData({
					search: this.search,
					sort: '4',
					sort_order: 'asc'
				})
			},
			// 弹出框 开关
			open_pop(type) {
				if (this.pop_show == false || this.pop_type == type) {
					this.pop_show = !this.pop_show;
				}
				this.pop_type = type;
			},
			// 选择排序条件
			select_sort(obj) {
				this.sort = obj
				this.pop_show = false;
				console.log(obj, 'select_sort')

				this.loadData({
					search: this.search,
					sort: obj.key
				})
			},
			// 选择筛选条件
			select_filtration(title, value) {
				let obj = {
					...this.filtration
				};
				obj[title] = value;
				this.filtration = obj;

				console.log(title, value, 'ssssssssssss')

				// this.loadData()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6efe9;
	}

	.container {

		.header {
			padding-top: 20rpx;
			background-color: #f6efe9;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			// border: 1px solid red;
			box-sizing: border-box;
			z-index: 999;
			// opacity: 0.3;

			.search {
				background-color: #fff;
				font-size: 22rpx;
				padding: 14rpx 36rpx;
				gap: 20rpx;
				position: relative;

				.search_button {
					display: inline-block;
					width: 100rpx;
					height: 55rpx;
					line-height: 55rpx;
					text-align: center;
					border-radius: 60rpx;
					background: #fd8c00;
					color: #fff;
					position: absolute;
					right: 30rpx;
					transform: translateX(20rpx);

				}
			}

			.control {
				display: flex;
				justify-content: space-between;
				// gap: 40rpx;
				// padding: 20rpx 0 30rpx 0;
				// width: 85%;
				margin: 0 auto;
				// border-bottom: 2rpx solid #9C9C9C30;

				.ctrl_item {
					font-size: 26rpx;

					&.active {
						color: #fd8c00;
					}
				}
			}

			.selected_addr {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				width: 85%;
				margin: 0 auto;
				font-size: 26rpx;

				.left {
					display: flex;
					gap: 8rpx;
					color: #3D3D3D;
				}

				.right {
					color: #fd8c00;
					;
				}
			}
		}

		.main {
			margin-top: 200rpx;
			height: calc(100vh - 240rpx);
			// border: 1px solid blue;
			padding: 0 20rpx;
			padding-bottom: 140rpx;

			.shop_item {
				display: flex;
				border-radius: 16rpx;
				background-color: #ffffff;
				box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
				margin-bottom: 20rpx;
				padding: 25rpx 10rpx;
				padding-right: 20rpx;

				.select_shop {
					display: flex;
					align-items: start;
					gap: 20rpx;
					margin-right: 12rpx;

					.radio {
						radio {
							transform: scale(0.7);
						}
					}
				}

				.image {
					width: 182rpx;
					height: 182rpx;
					background-size: cover !important;
					background-position: center !important;
					border-radius: 20rpx;
					margin-right: 16rpx;
				}

				.right {
					flex: 1;
					min-width: 0;

					.title {
						font-size: 28rpx;
						color: #3D3D3D;
						// margin-bottom: 12rpx;
					}

					.addr {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 22rpx;
						margin-bottom: 20rpx;

						.address {
							width: 100%;
							text-wrap: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}

					.score_sales {
						display: flex;
						gap: 0 30rpx;
						font-size: 22rpx;
						margin-top: 8rpx;
						margin-bottom: 8rpx;
						color: #808080;

						span {
							color: #3D3D3D;
						}
					}

					.tag_distance {
						display: flex;
						gap: 16rpx;
						justify-content: space-between;

						.tag_list {
							display: flex;
							gap: 8rpx;

							.tag {
								border: 2rpx solid #775B58;
								color: #775B58;
								padding: 2rpx 4rpx;
								font-size: 22rpx;
								border-radius: 8rpx;
								flex-shrink: 0;
								background: #EFEBEA;

								&.active {
									border-color: #775B58;
									color: #775B58;
								}
							}
						}
					}
				}
			}
		}

		// 弹窗
		#popup {
			position: fixed;
			top: 0%;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: 10;
			pointer-events: none;

			.popup-content {
				position: absolute;
				top: 190rpx;
				width: 100%;
				// min-height: 300rpx;
				background-color: #f6efe9;
				transform: translateY(-150%);
				z-index: 9;
				border-radius: 0 0 20rpx 20rpx;
				padding: 0 22rpx;
				box-sizing: border-box;
				transition: 0.3s;
				transition-delay: 0.1s;

				.sort_list {
					.sort_item {
						padding: 20rpx;
						font-size: 24rpx;
						border-bottom: 2rpx solid #f3f3f3;
						color: #3D3D3D;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.wlIcon-fanhui2:before {
							// color: #fd8c00 !important;
						}

						&.active {
							color: #fd8c00 !important;
						}
					}
				}

				.filtration_list {
					font-size: 24rpx;
					color: #3D3D3D;

					.filtration_item {

						.title {
							padding: 20rpx 0;
							padding-bottom: 16rpx;
							border-bottom: 2rpx solid #9C9C9C30;
						}

						.filtration_son {
							display: flex;
							padding-top: 16rpx;
							gap: 20rpx;

							.filtration_son_item {
								background-color: #f3f3f3;
								border-radius: 10rpx;
								padding: 6rpx 40rpx;

								&.active {
									color: #ffffff;
									border-color: #fd8c00;
									background-color: #fd8c00;
								}
							}
						}

					}
				}
			}

			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100vh;
				background-color: #00000050;
				z-index: 8;
				opacity: 0;
				transition: 0.1s;
			}

			&.active {
				pointer-events: all;

				.popup-content {
					transform: translateY(0%);
				}

				.mask {
					opacity: 1;
				}
			}
		}
	}
</style>